<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>大数据智能存储系统</title>
    <meta name="Keywords" content="智能存储">
    <meta name="description" content="大数据智能存储系统">

    <style type="text/css">
        *{margin:0;padding:0;}
        body{font-size:12px;font-family:"微软雅黑";color:#666;}

        /*top start*/
        .top{width:100%;height:50px;background:#f5f8fa;box-shadow: 0 1px 20px -3px #000;}
        .top .t-header{width:90%;height:50px;margin: 0 auto;}
        .top .t-header .t-logo{float:left;margin-top:11px;}
        .top .t-header .t-desc{float:right;line-height:50px;font-size:18px;}
        /*end top*/

        /*tools start*/
        .tools{width:90%;height:40px;margin: 30px auto;}
        .tools .t-btn{width:130px;height:40px;display:block;background:#6CF;text-align:center;line-height:40px;text-decoration:none;font-size:14px;color:#FFF;border-radius:3px;}
        .tools .t-btn:hover{background:#33BDFF;}
        /*end tools*/

        /*files start*/
        .files{width:90%;height:400px;margin:0 auto;}
        .files .f-tab{width:100%;border-collapse:collapse;}
        .files .f-tab tr td{padding-left:10px;line-height:40px;border-bottom:1px solid #F3F3F3;}
        .files .f-tab thead tr td{font-size:14px;font-weight:bold;background:#F0F0F0;}
        .files .f-tab tbody tr:hover{background:#F7F7F7;}
        .files .f-tab tbody tr td img{display:block;padding:3px 0 3px 0;}
        /*end files*/

    </style>

    <link type="text/css" rel="stylesheet" href="js/sg/css/sg.css"></link>
    <link type="text/css" rel="stylesheet" href="js/upload/upload.css"></link>

</head>
<body>

<!--top start-->
<div class="top">
    <div class="t-header">
        <div class="t-logo">
            <a href="#">
                <img src="images/logo.svg" alt="微云" width="87" height="30" />
            </a>
        </div>
        <div class="t-desc">大数据智能存储系统</div>
    </div>
</div>
<!--end top-->

<!--tools start-->
<div class="tools">
    <a href="#" class="t-btn" id="uploads-btn">上传文件</a>
</div>
<!--end tools-->

<!--files start-->
<div class="files">
    <table class="f-tab">
        <thead>
        <tr>
            <td>预览图</td>
            <td>文件名</td>
            <td>上传时间</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody id="f-tbody"></tbody>
    </table>
</div>
<!--end files-->


<!-- 引入jQuery官方类库 -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/upload/tz_upload.js"></script>
<script type="text/javascript" src="js/sg/tz_util.js"></script>
<script type="text/javascript" src="js/sg/sg.js"></script>
<script type="text/javascript">

    loading("数据正在加载中 ....",3);

    $.tmUpload({
        btnId:"uploads-btn",
        url:"/yun/upload",
        limitSize:"1024 MB",
        fileType:"*.jpg;*.mp4;*.png",
        multiple:true,
        callback:function(ServerData,file){
            var jsonData = eval("("+ServerData+")");
            $("#f-tbody").append('<tr class="f-item">'+
                '<td><img class="tz-img" src="'+jsonData.url+'" alt="预览图" width="40" height="40" /></td>'+
                '<td>'+jsonData.name+'</td>'+
                '<td>2018/6/7</td>'+
                '<td><a href="#" onclick="mydel(this)">删除</a></td>'+
                '</tr>');
            $(".tz-img").tzImgbox();
        }
    });

    // 删除
    function mydel(obj){
        $.tzAlert({title:"温馨提示 ！",content:"您确定要删除吗？",callback:function(ok){
                if(ok){
                    $(obj).parents(".f-item").fadeOut(1000,function(){
                        $(this).remove();
                    });
                }
            }});
    }


</script>

</body>
</html>